<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/schedule.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>我的日程</title>
    <meta charset="utf-8">
    <link href="${basepath}/css/viewcss/main/workschedule/scheduleform.css" rel="stylesheet" type="text/css"/>
    <style>
    	body {
			padding: 0;
			font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
			font-size: 12px;
		}
		.toolbar{
			height:30px;
			background-color:#F5F5F5;
			border-radius:4px;
			border: 1px solid #CCC;
			padding-top:8px;
		}
		.btndiv{
			text-align:center;
		}
		.btn{
			display: inline-block; 
			width: 80px;
			height: 25px;
			border-radius:4px;
			border: 1px solid #CCC;
			background: #F5F5F5;
			padding-top: 10px;
		}
		.querybtn{
			text-align:center;
			display: inline-block; 
			width: 60px;
			height: 18px;
			border-radius:4px;
			border: 1px solid #CCC;
			background: #F5F5F5;
			padding-top: 4px;
		}
    </style>
</head>
<script>
	//加载部门
	var loadDept = function(){
		$.ajax({
	        url: '${path}/commonSel/queryDepartmentPark',
	        dataType: 'json',
	        data:{dept_id:'${sessionScope.shopoauser.user_shopdept_id}'},
	        success: function(doc) {
	            $.each(doc,function(k,v) {
	            	$("#ownerDeptID").append("<option value='"+v.id+"'>"+v.text+"</option>");
	            });
	        }
	    });
	}
	//加载用户
	var loadUser = function(deptId,userId){
		$("#ownerID option").remove();
		$.ajax({
	        url: '${path}/commonSel/queryUserByDeptId',
	        dataType: 'json',
	        data:{dept_id:deptId},
	        success: function(doc) {
	            $.each(doc,function(k,v) {
	            	$("#ownerID").append("<option value='"+v.id+"'>"+v.text+"</option>");
	            });
	            if(userId){
	            	$("#ownerID").val(userId);
	            }
	        }
	    });
	}
	
	//-------------排班 start----------------
	//加载部门
	var work_loadDept = function(){
		$.ajax({
	        url: '${path}/commonSel/queryDepartmentPark',
	        dataType: 'json',
	        data:{dept_id:'${sessionScope.shopoauser.user_shopdept_id}'},
	        success: function(doc) {
	            $.each(doc,function(k,v) {
	            	$("#work_dept").append("<option value='"+v.id+"'>"+v.text+"</option>");
	            });
	        }
	    });
	}
	//加载用户
	var work_loadUser = function(deptId,userId){
		$("#work_assist option").remove();
		$.ajax({
	        url: '${path}/commonSel/queryUserByDeptId',
	        dataType: 'json',
	        data:{dept_id:deptId},
	        success: function(doc) {
	            $.each(doc,function(k,v) {
	            	$("#work_assist").append("<option value='"+v.id+"'>"+v.text+"</option>");
	            });
	            if(userId){
	            	$("#work_assist").val(userId);
	            }
	        }
	    });
	}
	
	//加载scheduleType
	var loadScheduleType = function(deptId){
		$.ajax({
	        url: '${path}/commonSel/getScheduleType',
	        dataType: 'json',
	        success: function(doc) {
	            $.each(doc,function(k,v) {
	            	$("#work_scheduleType").append("<option value='"+v.id+"'>"+v.typeName+"</option>");
	            	//console.log(v);
	            });
	        }
	    });
	}
	//-------------排班 end----------------
	
	$(document).ready(function() {
		$("#querydate").val(new Date().format('yyyy-MM'));
		loadDept();
		$('#ownerDeptID').change(function(){
			  loadUser($(this).val());
		});
		work_loadDept();
		$('#work_dept').change(function(){
			work_loadUser($(this).val());
		});
		loadScheduleType();
	
		$('#calendar').fullCalendar({
			theme: true,
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			//defaultDate: '2015-02-12',
			editable: true,
			height:650,
			monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],    
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],    
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],    
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],    
			eventLimit: true, // allow "more" link when too many events
			buttonText: {    
                today: '今天',    
                month: '月',    
                week: '周',    
                day: '日'    
                //prev: '上一月',    
                //next: '下一月'    
            },
            //dayClick: function(date, allDay, jsEvent, view) {  
            //	$("#id").val("");
            //	clearForm();
            //	$("#starttime").val(new Date(date).format('yyyy-MM-dd hh:mm'));
            //	showPop();
            	//console.log("---->date:"+date+";"+new Date(date).format('yyyy-MM-dd hh:mm'));
            	//console.log(new Date(allDay.timeStamp).format('yyyy-MM-dd hh:mm'));
            	//console.log("---->jsEvent:"+jsEvent);
            	//console.log(jsEvent);
            	//console.log("---->view:"+view); 
            //},
            eventMouseover:function(event,jsEvent,view ) { 
            	var start = new Date(event._selfData.start).format('yyyy-MM-dd hh:mm');
            	var end = new Date(event._selfData.end).format('yyyy-MM-dd hh:mm');
            	var title = event.title;
            	$('#tiptitle').html(title);
            	$('#tipstart').html("从:"+start);
            	$('#tipend').html("到:"+end);
            	layer.tips($('#tipdiv').html(), this, {tips: [1,event.backgroundColor],time: 4000});
            },
            eventClick:function(calEvent, jsEvent, view){ 
            	if(calEvent._selfData.datatype=='task'){
            		setForm(calEvent._selfData);
            		showInfo();
            	}
            	if(calEvent._selfData.datatype=='work'){
            		setworkForm(calEvent);
            		work_showPop();
            	}
            },
            //select: function(start, end) {
			//	var startTime = new Date();
			//	startTime.setTime(start);
			//	var endTime = new Date();
			//	endTime.setTime(end);
			//},
			//events: {
			//	url: '${path}/assist/queryScheduler',
			//	data : {querydate : $('#querydate').val() }
			//}
			events: function(start, end, timezone, callback) {
		        $.ajax({
		            url: '${path}/task/queryTaskDaily',
		            dataType: 'json',
		            success: function(doc) {
		                var events = [];
		                $.each(doc,function(k,v) {
		                    events.push({
		                        title: v.title,
		                        start: new Date(v.start).format('yyyy-MM-dd hh:mm'),
		                        end: new Date(v.end).format('yyyy-MM-dd hh:mm'),
		                        color:'#0FBEFB',
		                        backgroundColor:v.backgroundColor,
		                        borderColor:v.borderColor,
		                        textColor:v.textColor,
		                        _selfData:v
		                    });
		                });
		                callback(events);
		            }
		        });
		    }
		});
	});
	
	var layIndex;
	var showInfo = function(){
		layIndex = layer.open({
			title:"任务查看",
			type: 1,
			fix: false,
	        //shadeClose: true,
	        maxmin: true,
			area: ['750px', '620px'], //宽高
		    content: $('#inlineForm'),
		    cancel: function(index){
		    	reflashCal();
	        }
		});
	}
	
	var work_showPop = function(){
		layIndex = layer.open({
			title:"排班信息",
			type: 1,
			fix: false,
	        //shadeClose: true,
	        maxmin: true,
			area: ['750px', '400px'], //宽高
		    content: $('#work_inlineForm'),
		    cancel: function(index){
		    	//reflashCal();
	        }
		});
	}
	
	//提交
	var subForm = function(){
		var formval = JsonCode(taskForm);
		formval = JSON.parse(formval);
		formval = JSON.stringify(formval);
		//var formval = $('#scheduleForm').serialize(); 
		$.ajax({
            url: '${path}/task/overTask',
            contentType: "application/json",
            type:'POST', 
            data: formval,
            dataType: 'json',
            success: function(doc) {
            	layer.msg(doc.msg, {time: 3000, icon:6});
            	if(doc.status==1){
            		layer.close(layIndex);
	            	reflashCal();
            	}
            }
        });
	}
	
	var clearForm = function(data){
		$('#ownerDeptID').val('');
		$('#id').val('');
		$('#plan_month_detailID').val('');
		$('#plan_typeID').val('');
		$('#parentId').val('');
		$('#title').val('');
		$('#priority_typeCode').val('');
		$('#task_statusCode').val('');
		$('#beginTime').val('');
		$('#endTime').val('');
		$('#needTime').val('');
		$('#frequency').val('');
		$('#goal').val('');
		$('#standard').val('');
		$('#note').val('');
		$('#plan_month').html('');
		$('#completeRatio').val('');
		$('#otherInfo').html('');
		$('#taskTypeName').val('');
		$('#customerName').val('');
		$('#contactName').val('');
	}
	
	var setForm = function(data){
		clearForm();
		//loadDept();
		$('#ownerDeptID').val(data.ownerDeptID);
		loadUser(data.ownerDeptID,data.ownerID);
		//$('#ownerID').val(data.ownerID);
		$('#id').val(data.id);
		$('#plan_month_detailID').val(data.plan_month_detailID);
		$('#plan_typeID').val(data.plan_typeID);
		$('#parentId').val(data.id);
		$('#title').val(data.title);
		$('#priority_typeCode').val(data.priority_typeCode);
		$('#task_statusCode').val(data.task_statusCode);
		$('#beginTime').val(data.beginTime);
		$('#endTime').val(data.endTime);
		$('#needTime').val(data.needTime);
		$('#frequency').val(data.frequency);
		$('#goal').val(data.goal);
		$('#standard').val(data.standard);
		$('#note').val(data.note);
		$('#plan_month').html("计划类型:"+data.planTypeName+",参考月季划:"+data.plan_month_detailName);
		$('#completeRatio').val(data.completeRatio);
		$('#otherInfo').html(data.marketingPlanOrEvaluation);
		$('#taskTypeName').val(data.taskTypeName);
		$('#customerName').val(data.customerName);
		$('#contactName').val(data.contactName);
	}
	
	var clearworkForm = function(){
		$("#work_title").val('');
    	$("#work_scheduleType").val('');
    	$("#work_dept").val('');
    	$("#work_starttime").val('');
    	$("#work_endtime").val('');
		$("#work_content").val('');
	}
	
	var setworkForm = function(calEvent){
		clearworkForm();
    	$("#work_title").val(calEvent.title);
    	$("#work_scheduleType").val(calEvent._selfData.scheduleType);
    	$("#work_dept").val(calEvent._selfData.deptId);
    	work_loadUser(calEvent._selfData.deptId,calEvent._selfData.userId);
    	$("#work_starttime").val(new Date(calEvent._selfData.start).format('yyyy-MM-dd hh:mm'));
    	$("#work_endtime").val(new Date(calEvent._selfData.end).format('yyyy-MM-dd hh:mm'));
		$("#work_content").val(calEvent._selfData.content);
	}
	
	var queryCalendar = function(){
		$('#calendar').fullCalendar( 'gotoDate',new Date($("#querydate").val()));
		//$('#calendar').fullCalendar('refetchEvents');
	}
	
	var reflashCal = function(){
		$('#calendar').fullCalendar('refetchEvents');
	}
</script>
<body class="page-body" >
	<div id="toolbar" class="toolbar">
		<label style="font-size:14px;margin-left:20px;">日期</label>
		<input id="querydate" class="laydate-icon" onclick="laydate({istime: true, format: 'YYYY-MM'})" 
			style="width:200px;border-radius:4px;margin-left:10px;">
		<a href="#" onclick="queryCalendar()" class="querybtn">查询</a>
	</div>
	
	<div id='calendar' style="width:98%;text-align:center;margin:0 auto;padding:5px"></div>
	
	<!-- 日程 -->
	<div id="inlineForm" style="display:none;padding:30px">
		<form class="bootstrap-frm" action="" method="post" id="taskForm" name="taskForm">
			<input type="hidden" name="id" id="id" >
			<input type="hidden" name="plan_month_detailID" id="plan_month_detailID" >
			<input type="hidden" name="parentId" id="parentId" >
			<input type="hidden" name="plan_typeID" id="plan_typeID" >
			<h1 id="plan_month" style="text-align:center"></h1>
			<table>
                <tr>
                    <td style="padding:5px">
                        <label style="font-size:14px;">标题</label>
                    </td>
                    <td colspan="3" style="padding:5px">
                    	<input type="text" placeholder="标题" name="title" id="title" style="width:200px">
                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                        <label style="font-size:14px;">任务类型</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" placeholder="任务类型" name="taskTypeName" id="taskTypeName" style="width:200px">
                    </td>
                    <td style="padding:5px">
                        <label style="font-size:14px;">优先级</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="priority_typeCode" id="priority_typeCode" style="width:200px">
                    		<option value=''>请选择</option>
                    		<option value='1'>A</option>
                    		<option value='2'>B</option>
                    		<option value='3'>C</option>
                    		<option value='4'>D</option>
                    	</select>
                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                       <label style="font-size:14px;">责任部门</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="ownerDeptID" id="ownerDeptID" style="width:200px">
                    		<option value=''>请选择</option>
                    	</select>
                    </td>
                    <td style="padding:5px">
                        <label style="font-size:14px;">责任人</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="ownerID" id="ownerID" style="width:200px">
                    		<option value=''>请选择</option>
                    	</select>
                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                       <label style="font-size:14px;">客户</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" placeholder="客户" name="customerName" id="customerName" style="width:200px">
                    </td>
                    <td style="padding:5px">
                        <label style="font-size:14px;">联系人</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" placeholder="联系人" name="contactName" id="contactName" style="width:200px">
                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                       <label style="font-size:14px;">开始日期</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" name="beginTime" id="beginTime" class="laydate-icon" 
                    		onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" style="width:200px">
                    </td>
                    
                    <td style="padding:5px">
                        <label style="font-size:14px;">结束时间</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" name="endTime" id="endTime" class="laydate-icon" 
                    		onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" style="width:200px">
                    </td>
                </tr>
                <tr>
                    <td style="width:100px;padding:5px">
                        <label style="font-size:14px;">所需时间</label>
                    </td>
                    <td style="width:220px;padding:5px">
                    	<input type="text" placeholder="所需时间" name="needTime" id="needTime" style="width:200px">
                    </td>
                    <td style="padding:5px">
                        <label style="font-size:14px;">变更频率</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" placeholder="变更频率" name="frequency" id="frequency" style="width:200px">
                    </td>
                </tr>
                <tr>
                	<td style="padding:5px">
                        <label style="font-size:14px;color:red">任务状态</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="task_statusCode" id="task_statusCode" style="width:200px">
                    		<option value=''>请选择</option>
                    		<option value='0'>完成</option>
                    		<option value='1'>过期</option>
                    		<option value='2'>已变更</option>
                    		<option value='3'>暂停</option>
                    		<option value='4'>正常</option>
                    	</select>
                    </td>
                    <td style="width:100px;padding:5px">
                        <label style="font-size:14px;color:red">完成百分比</label>
                    </td>
                    <td style="width:220px;padding:5px">
                    	<input type="text" placeholder="完成百分比" name="completeRatio" id="completeRatio" style="width:200px">
                    </td>
                </tr>
                <tr>
                    <td style="width:100px;padding:5px">
                        <label style="font-size:14px;">任务目标</label>
                    </td>
                    <td colspan="3" style="padding:5px">
                        <textarea name="goal" id="goal" style="width:490px;height:50px"></textarea>
                    </td>
                </tr>
                <tr>
                    <td style="width:100px;padding:5px">
                        <label style="font-size:14px;">任务标准</label>
                    </td>
                    <td colspan="3" style="padding:5px">
                        <textarea name="standard" id="standard" style="width:490px;height:50px"></textarea>
                    </td>
                </tr>
                <tr>
                    <td style="width:100px;padding:5px">
                        <label style="font-size:14px;color:red">完成备注</label>
                    </td>
                    <td colspan="3" style="padding:5px">
                        <textarea name="note" id="note" style="width:490px;height:50px"></textarea>
                    </td>
                </tr>
            </table>
            <div class="btndiv"><a href="#" onclick="subForm()" class="btn">结束任务</a></div>
            <h1 style="text-align:center;text-align:left">附加信息</h1>
            <div id="otherInfo"></div>
        </form>
	</div>
	
	<!-- 排班 -->
	<div id="work_inlineForm" style="display:none;padding:30px">
		<form class="bootstrap-frm" action="" method="post" id="work_scheduleForm" name="work_scheduleForm">
			<table>
                <tr>
                    <td style="width:100px;padding:5px">
                        <label style="font-size:14px;">标题</label>
                    </td>
                    <td style="width:220px;padding:5px">
                    	<input type="text" placeholder="标题" name="work_title" id="work_title" style="width:200px">
                    </td>
                    <td style="padding:5px">
                        <label style="font-size:14px;">排班类型</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="work_scheduleType" id="work_scheduleType" style="width:200px">
                    		<option value=''>请选择</option>
                    	</select>
                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                       <label style="font-size:14px;">部门</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="work_dept" id="work_dept" style="width:200px">
                    		<option value=''>请选择</option>
                    	</select>
                    </td>
                    
                    <td style="padding:5px">
                        <label style="font-size:14px;">员工</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="work_assist" id="work_assist" style="width:200px">
                    		<option value=''>请选择</option>
                    	</select>
                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                       <label style="font-size:14px;">开始时间</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" name="work_starttime" id="work_starttime" class="laydate-icon" 
                    		onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" style="width:200px">
                    </td>
                    
                    <td style="padding:5px">
                        <label style="font-size:14px;">结束时间</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" name="work_endtime" id="work_endtime" class="laydate-icon" 
                    		onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" style="width:200px">
                    </td>
                </tr>
                <tr>
                    <td style="width:100px;padding:5px">
                        <label style="font-size:14px;">内容</label>
                    </td>
                    <td colspan="3" style="padding:5px">
                        <textarea name="work_content" id="work_content" style="width:510px;height:100px"></textarea>
                    </td>
                </tr>
            </table>
            <!-- <div class="btndiv"><a href="#" onclick="subForm()" class="btn">确定</a></div> -->
        </form>
	</div>
	
	<div style="display:none" id="tipdiv">
		<div id="tiptitle" style="font-size:12px"></div>
		<div style="font-size:12px">计划时间:</div>
		<div id="tipstart" style="font-size:12px"></div>
		<div id="tipend" style="font-size:12px"></div>
	</div>
</body>
</html>
